<template>
	<view class="videoInfo">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		
		<view class="uni-padding-wrap uni-common-mt">
			<video id="myVideo" :src="videoUrl?videoUrl:firstVideo" autoplay="true" @error="videoErrorCallback" controls></video>
		</view>

		<view class="content" v-if="isShow==0">
			<!-- 视频标题 -->
			<view class="videoTitle">
				<view class="videoTitle-r">
					<text>{{videoinfo.vod_name}}</text>
					<p>{{videoinfo.vod_class}}|评分{{videoinfo.vod_score}}</p>
				</view>
				<view class="videoTitle-l" @tap="getIntroduce(1)">
					简介
					<img src="~/static/icon/rightArrow.png">
				</view>
			</view>
			<view class="videoOpera">
				<view class="comment">
					<img src="~/static/icon/comment.png">
					<text>{{commentNum}}热评</text>
				</view>
				<view class="comment" @tap="collect" v-if="collectShow">
					<img src="~/static/icon/collect2.png">
					<text>收藏</text>
				</view>
				<view class="comment" @tap="iscollect" v-if="iscollectShow">
					<img src="~/static/icon/iscollect.png">
					<text>已收藏</text>
				</view>
				<view class="comment" @tap="goCache">
					<img src="~/static/icon/cache2.png">
					<text>缓存</text>
				</view>
				<view class="comment" @tap="share">
					<img src="~/static/icon/share.png">
					<text>分享</text>
				</view>
			</view>

			<!-- 选集 -->
			<view class="setNum">
				<view class="text">
					<text>选集</text>
					<view class="rate" @tap="getIntroduce(3)">
						<text>更新至{{videoList.url_count}}集</text>
						<img src="~/static/icon/rightArrow.png">
					</view>
				</view>
				<view class="num">
					<view class="box" v-for="(item,index) in videoList.urls" :key="index" v-if="index<7" :class="{active:num==index}"
					 @tap="curVideo(index,item)">
						<text>{{index}}</text>
					</view>
				</view>
			</view>

			<!-- 为你推荐 -->
			<view class="recommend">
				<view class="text">
					<text>为你推荐</text>
					<view class="more">
						<text>更多</text>
						<img src="~/static/icon/rightArrow.png">
					</view>
				</view>
				<view class="recomVideo">
					<view class="recomVideo-item" v-for="(item,index) in recommendList" :key="index" @tap="getInfo(item)">
						<span>{{item.vod_score}}分</span>
						<image :src="item.vod_pic" mode="aspectFill"></image>
						<text>{{item.vod_name}}</text>
					</view>
				</view>
			</view>

			<!-- 热门评论 -->
			<view class="hotReviews">
				<view class="text">
					<text>热门评论</text>
				</view>
				<!-- 评论区 start -->
				<view class="uni-wrap">
					<view class="uni-comment">
						<view class="uni-comment-list" v-for="(item,index) in commendList" :key="index" v-if="contentShow">
							<view class="uni-comment-face">
								<image :src="item.user_portrait" mode="widthFix"></image>
							</view>
							<view class="uni-comment-body">
								<view class="uni-comment-top">
									<view class="uni-comment-name">
										<text>{{item.user_name}}</text>
										<view class="vip">
											<img :src="item.vip_pic">
											<!-- <i></i> -->
										</view>
									</view>
									<view class="time">{{item.createtime}}</view>
								</view>
								<view class="uni-comment-content"  @tap="replyComment(item)">{{item.content}}</view>
								<view class="uni-comment-date">
									<view class="uni-comment-replay-btn" @tap="getIntroduce(2)">{{item.count}}回复</view>
									<view class="uni-thumbs-up" @tap="isLike(item,index)">
										<img src="~/static/icon/nocall.png" v-show="!item.callShow">
										<img src="~/static/icon/call.png" v-show="item.callShow">
										<span v-if="!item.callShow" class="call">{{item.likes_num}}</span>
										<span v-if="item.callShow" class="isCall">{{item.likes_num}}</span>
									</view>
								</view>
							</view>
						</view>

						<view class="nocontent" v-if="nocontentShow">
							评论一个吧~
						</view>
					</view>
				</view>
				<!-- 发表评论 -->
				<view class="makeComment">
					<view class="user-talk">
						<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
						<input type="text" placeholder="我来说几句" @click="changeInput" :value="value" />
					</view>
				</view>
			</view>

			<!--发表评论弹出层 -->
			<uni-popup ref="popup" type="bottom" @change="popChange">
				<view class="makeCommentPop">
					<view class="uni-textarea">
						<textarea @blur="bindTextAreaBlur" auto-height :placeholder="placeholder"/>
						</view>
					
					<view class="makeCommentbtn" @tap="makeComment">
						<span>发表</span>
					</view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 简介 -->
		<view class="intruduce" v-if="isShow==1">
			<view class="detailTop">
				<text>简介</text>
				<view class="close" @tap="getIntroduce(0)">
					<img src="~/static/icon/close.png">
				</view>
			</view>
			<view class="line"></view>
			<view class="intruduceCon">
				<view class="intruduce-top">
					<text>{{videoinfo.vod_name}}</text>
					<p>主演: {{videoinfo.vod_actor}}</p>
					<p>导演: {{videoinfo.vod_director}}</p>
					<p>年份: {{videoinfo.vod_year}}</p>
					<p>地区: {{videoinfo.vod_area}}</p>
					<p>类型: {{videoinfo.vod_class}}</p>
				</view>
				<view class="intruduce-top">
					<text class="outline">概要</text>
					<p v-html="videoinfo.vod_content"></p>
				</view>
			</view>
		</view>


		<!-- 回复详情 -->
		<view class="replyDetail" v-if="isShow==2">
			<view class="detailTop">
				<text>详情</text>
				<view class="close" @tap="getIntroduce(0)">
					<img src="~/static/icon/close.png">
				</view>
			</view>
			<view class="line"></view>
			<view class="detailContent">
				<view class="comment-list">
					<view class="comment">
						<view class="uni-comment-face">
							<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
						</view>
						<view class="uni-comment-body">
							<view class="uni-comment-top">
								<view class="uni-comment-name">
									<text>小猫咪</text>
									<view class="vip">
										<img src="~/static/icon/vip.png">
										<i>2</i>
									</view>
								</view>
								<view class="time">2天前</view>
							</view>
							<view class="uni-comment-content">电视剧折射了人间的悲欢离合，很适合一大家子去 看，比较有感触！</view>
							<view class="uni-comment-date">
								<view></view>
								<!-- <view class="uni-comment-replay-btn" @click="reply">5回复</view> -->
								<view class="uni-thumbs-up">
									<img src="~/static/icon/call.png">
									<span>20</span>
								</view>
							</view>
						</view>
					</view>
					<view class="comment-num">
						<view class="comment-allReplay">全部2条回复</view>
					</view>
				</view>

				<view class="uni-comment-list">
					<view class="uni-comment-face">
						<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
					</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<view class="uni-comment-name">
								<text>小猫咪</text>
								<view class="vip">
									<img src="~/static/icon/vip.png">
									<i>2</i>
								</view>
							</view>
							<view class="time">2天前</view>
						</view>
						<view class="uni-comment-content">电视剧折射了人间的悲欢离合，很适合一大家子去 看，比较有感触！</view>
						<view class="uni-comment-date">
							<view class="uni-comment-replay-btn">5回复</view>
							<view class="uni-thumbs-up">
								<img src="~/static/icon/call.png">
								<span>20</span>
							</view>
						</view>
					</view>
				</view>

				<view class="uni-comment-list">
					<view class="uni-comment-face">
						<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
					</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<view class="uni-comment-name">
								<text>小猫咪</text>
								<view class="vip">
									<img src="~/static/icon/vip.png">
									<i>2</i>
								</view>
							</view>
							<view class="time">2天前</view>
						</view>
						<view class="uni-comment-content">电视剧折射了人间的悲欢离合，很适合一大家子去 看，比较有感触！</view>
						<view class="uni-comment-date">
							<view class="uni-comment-replay-btn">5回复</view>
							<view class="uni-thumbs-up">
								<img src="~/static/icon/call.png">
								<span>20</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 发表评论 -->
			<view class="makeComment">
				<view class="user-talk">
					<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
					<input type="text" placeholder="我来说几句" @click="changeInput" />
				</view>
			</view>
		</view>


		<!-- 选集 -->
		<view class="selec" v-if="isShow==3">
			<view class="detailTop">
				<text>选集</text>
				<view class="close" @tap="getIntroduce(0)">
					<img src="~/static/icon/close.png">
				</view>
			</view>
			<view class="line"></view>
			<view class="num">
				<view class="box" v-for="(item,index) in videoList.urls" :key="index" :class="{active:num==index}" @tap="curVideo(index,item)">
					<text>{{index}}</text>
				</view>
			</view>
		</view>

		
		
		<!-- 分享弹出层 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="sharePop">
				<view class="shareType">
					<view class="wx">
						<view class="img">
							<img src="~/static/icon/weixin.png">
						</view>
						<span>微信</span>
					</view>
					<view class="wx">
						<view class="img">
							<img src="~/static/icon/friends.png">
						</view>
						<span>微信朋友圈</span>
					</view>
					<view class="wx">
						<view class="img">
							<img src="~/static/icon/weibo.png">
						</view>
						<span>微博</span>
					</view>
					<view class="wx">
						<view class="img">
							<img src="~/static/icon/qq.png">
						</view>
						<span>QQ</span>
					</view>
				</view>
				<view class="shareline"></view>
				<view class="cancel" @tap="shareCancel">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				num:1,
				likeNum:'',
				userid:'',
				isShow: 0,//默认0组件显示
				commentNum:0,//评论总数量
				toUid:0,//被评论id
				vodId:2470,//影片id
				content:'',//评论内容
				value:'',//输入框内容
				videoUrl:'',//视频链接
				firstVideo:'',//默认播放第一个视频url
				collectShow:true,//未收藏图标
				iscollectShow:false,//已收藏图标
				contentShow:true,
				nocontentShow:false,//评论列表为空时显示
				placeholder: '我来说几句~',
				videoinfo: [],//视频详情
				videoList:[],//视频详情选集列表
				recommendList:[],//为你推荐视频列表
				commendList:[],//评论列表
			}
		},
		onLoad(option) {
			let vi_code = uni.getStorageSync('user_info');
			let user_info = uni.getStorageSync('user_info');
			this.userid = user_info.user_id;
			// console.log(user_info);
			// console.log(vi_code);
			// this.vodId=option.id;
			// console.log(this.vodId);
			this.getrecommend();
			this.getcomment();
			uni.request({
				url: 'http://221.234.36.126:82/api.php/Login/visitor_login',
				method: 'POST',
				data: {
					token: '1CECE2221211DDCB613882C3311EC670'
				},
				header: {
					'content-type': 'application/json;charset=UTF-8'
				},
				success: (res) => {
					// console.log(res.data.data.hash);
					let visitor = res.data.data.hash;
					
					uni.request({
						url: 'http://221.234.36.126:82/api.php/Vod/vod_detail',
						method: 'POST',
						data: {
							token: '1CECE2221211DDCB613882C3311EC670',
							hash: visitor,
							vod_id: this.vodId
						},
						header: {
							'content-type': 'application/json;charset=UTF-8'
						},
						success: (res) => {
							// console.log(res.data);
							this.videoinfo = res.data.info;
							// console.log(this.videoinfo)
							this.videoList=res.data.info.vod_play_list[2];
							// console.log(this.videoList)
							this.firstVideo=this.videoList.urls[1].url;
							// console.log(this.firstVideo)
						}
					})
					
					
				}
			});
		},
		methods: {
			videoErrorCallback: function(e) {
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: false
				// })
			},
			changeInput() {
				this.$refs.popup.open()
				this.value=''
			},
			bindTextAreaBlur(e){
				this.content=e.detail.value
			},
			// 发表评论事件
			makeComment(){
				
				uni.request({
					url: 'http://221.234.36.126:82/api.php/User/comment',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						vod_id: this.vodId,
						user_id:84,
						content:this.content,
						to_uid:this.toUid
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						console.log(res)
						this.$refs.popup.close()
						this.content=''
						this.value=''
						uni.request({
							url: 'http://221.234.36.126:82/api.php/User/comment_list',
							method: 'POST',
							data: {
								token: '1CECE2221211DDCB613882C3311EC670',
								vod_id: this.vodId
							},
							header: {
								'content-type': 'application/json;charset=UTF-8'
							},
							success: (res) => {
								// console.log(res)
								this.commendList=res.data.list
							}
						})
					}
				})
			},
			getIntroduce(e){
				this.isShow = e;
			},
			curVideo(index,item){
				this.num=index
				this.videoUrl=item.url
			},
			// 影片详情页
			getInfo(item) {
				uni.navigateTo({
					url: '/pages/videoInfo/videoInfo?id='+vodId
				});
			},
			// 为你推荐列表
			getrecommend(){
				uni.request({
					url: 'http://221.234.36.126:82/api.php/Login/visitor_login',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670'
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						// console.log(res.data.data.hash);
						let visitor = res.data.data.hash;
						
						uni.request({
							url: 'http://221.234.36.126:82/api.php/Vod/vod_detail_tj',
							method: 'POST',
							data: {
								token: '1CECE2221211DDCB613882C3311EC670',
								hash: visitor,
								vod_id: this.vodId
							},
							header: {
								'content-type': 'application/json;charset=UTF-8'
							},
							success: (res) => {
								// console.log(res)
								this.recommendList=res.data.list
							}
						})
					}
				});
			},
			
			// 评论列表渲染
			getcomment(){
				uni.request({
					url: 'http://221.234.36.126:82/api.php/User/comment_list',
					method: 'POST',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						vod_id: this.vodId
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						console.log(res.data);
						this.commendList=res.data.list;
						this.commentNum=this.commendList.length;
						if(this.commendList==''){
							this.nocontentShow=true;
							this.contentShow=false;
						}else{
							this.contentShow=true;
							this.nocontentShow=false;
						}
					}
			})
			},
			
			// 弹出框状态
			popChange(e){
				if(e.show==false){
					this.placeholder='我来说几句~'
				}
			},
			
			// 回复评论
			replyComment(item){
				console.log(item);
				this.$refs.popup.open();
				this.placeholder='回复'+item.user_name;
				this.toUid=item.user_id;
				// console.log(this.toUid);
			},
			
			// 点赞
			isLike(item,index){
				
				uni.request({
					url:'http://221.234.36.126:82/api.php/User/comment_likes_num',
					method:'POST',
					data:{
						token: '1CECE2221211DDCB613882C3311EC670',
						user_id:this.userid,
						comment_id:item.id
					},
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						console.log(res.data);
						this.getcomment();
						// if(!item.callShow){
						// 	this.$set(item,'callShow',false);
						// 	item.callShow=!item.callShow;
							
						// }else{
						// 	item.callShow=!item.callShow;
						// }
					}
				})
				
				
			},
			
			// 分享
			share(){
				this.$refs.sharePopup.open()
			},
			// 取消分享
			shareCancel(){
				this.$refs.sharePopup.close()
			},
			// 收藏
			collect(){
				uni.request({
						url: 'http://221.234.36.126:82/api.php/Vod/vod_collect',
						method: 'POST',
						data: {
							token: '1CECE2221211DDCB613882C3311EC670',
							vod_id: this.vodId,
							user_id:84
						},
						header: {
							'content-type': 'application/json;charset=UTF-8'
						},
						success: (res) => {
							console.log(res);
							this.collectShow=false;
							this.iscollectShow=true;
						}
						
				})
			},
			//取消收藏
			iscollect(){
				uni.request({
						url: 'http://221.234.36.126:82/api.php/Vod/vod_collect_del',
						method: 'POST',
						data: {
							token: '1CECE2221211DDCB613882C3311EC670',
							vod_id: this.vodId,
							user_id:84
						},
						header: {
							'content-type': 'application/json;charset=UTF-8'
						},
						success: (res) => {
							console.log(res)
							this.collectShow=true
							this.iscollectShow=false
						}
						
				})
			},
			// 跳转缓存页面
			goCache(){
				uni.navigateTo({
					url: "/pages/cache/cache?vodId="+this.vodId,
				})
			}
		}
	}
</script>

<style>
	@import url("videoInfo.css");
</style>
